<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>wxshop用户列表显示</title>


</head>
<body>
<!-- 用户信息显示表格 -->

<div class="layui-container">
    <div class="demoTable">
        搜索登录名：
        <div class="layui-inline">
            <input class="layui-input" name="userName" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn layui-btn-normal findbtn" data-type="reload"><i class="layui-icon">&#xe615;</i>
        </button>
        <button class="layui-btn layui-btn-normal" id="addbtn"><i class="layui-icon">&#xe61f;</i>添加用户</button>

    </div>
    <div class="layui-container">
        <table id="demo" lay-filter="test"></table>
    </div>
</div>

<div id="setLevel" hidden="hidden"></div>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal" lay-event="edit">编辑</a>
    {{#  if(d.id !=1){ }}
    <a class="layui-btn layui-btn-danger layui-btn-normal" lay-event="del">删除</a>
    {{#  } else { }}
    {{#  } }}
    <a class="layui-btn " lay-event="setLevel">更改等级</a>
    <a class="layui-btn layui-btn-warm" lay-event="repwd">重置密码</a>
</script>
<script type="text/javascript">
    layui.use(['layer', 'table'], function () {
        var table = layui.table;
        $ = layui.jquery;
        layer = layui.layer;

        /*****************************
         * @Description: 数据表格异步加载
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        var tableIns = table.render({
            elem: '#demo',
            url: '/user/list' //数据接口
            ,
            page: true //开启分页
            ,
            cols: [
                [ //表头
                    {field: 'id', title: 'ID', width: '7%', sort: true, fixed: 'left'}
                    , {field: 'headimg', title: '头像', width: '13%', templet: '<div><img src="{{ d.headimg}}"></div>'}
                    , {field: 'loginname', title: '账号', width: '10%'}
                    , {field: 'username', title: '姓名', width: '10%'}
                    , {field: 'email', title: '邮箱', width: '15%'}
                    , {field: 'phone', title: '电话', width: '11%'}
                    , {fixed: 'right', toolbar: '#barDemo', title: '操作', width: '34%'}
                ]
            ],
            limit: 10,
            limits: [10, 15],
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            id: 'demo'
        });

        /*****************************
         * @Description: 数据表格工具行功能
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/14
         *******************************/
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', {icon: 2}, function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: "/user/deleteUser",
                        dataType: "json",
                        data: {
                            id: data.id
                        },
                        type: "post",
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg(data.msg, {icon: 1});
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }

                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                $("#content-body").load("/user/goUpdateUserPage/" + data.id);
            } else if (layEvent === 'setLevel') { //设置等级
                //$("#setLevel").load("/user/gosetLevelPage/" + data.id);
                $.ajax({
                    url: "/user/gosetLevelPage/" + data.id,
                    type: "post",
                    asyns: true,
                    success: function (data) {
                        layer.open({
                            title: "等级设置",
                            type: 1,
                            skin: 'layui-layer-rim layui-layer-molv',
                            content: data,
                            area: ['500px', '382px'],
                            cancel: function (index, layero) {
                                layer.close(index);
                                return false;
                            }
                        });
                    }
                });
            }else if (layEvent === 'repwd') { //重置密码
                $.ajax({
                    url: "/user/resetPwdPage/"+data.id,
                    type: "post",
                    asyns: true,
                    success: function (data) {
                        layer.open({
                            title: "重置密码",
                            type: 1,
                            skin: 'layui-layer-rim layui-layer-huang',
                            content: data,
                            area: ['500px', '382px'],
                            cancel: function (index, layero) {
                                layer.close(index);
                                return false;
                            }
                        });
                    }
                });
            }
        });

        $('.findbtn').on('click', function () {
            var demoReload = $('#demoReload');
            if (demoReload != null && demoReload.equals('')) {
                tableIns.reload({
                    where: {
                        loginname: demoReload.val()
                    } //设定异步数据接口的额外参数
                });
            }

        });

        $("#addbtn").click(function () {
            $("#content-body").load("/user/goAddUserPage");
        });

    });

</script>

</body>
</html>